Théorie graphique

3D

Avec les fonctions de dessin 2D, comme par exemple drawTriangle(x0:int, y0:int, x1:int, y1:int, x2:int, y2:int), il est possible de travailler directement avec des coordonnées de pixels. Dans un monde 3D, cela n’est plus possible, car les objets apparaissent plus petits à l’écran plus ils sont éloignés. Cela signifie que deux objets de même taille n’ont pas forcément la même taille à l’écran. C’est pourquoi nous utilisons pour tous les dessins 3D notre propre système de coordonnées, dans lequel toutes les distances sont interprétées en mètres et où l’origine se trouve au centre.

Pour les dessins 3D, il y a trois cadres de coordonnées qui sont importants: Le cadre mondial fixe, le cadre de dessin actuel et le cadre de la caméra. Par défaut, le cadre mondial est un système droitier dans lequel l’axe x est orienté vers la droite, l’axe y vers le haut et l’axe z hors de l’écran en direction de l’utilisateur.

La caméra se trouve initialement à la position (x=0, y=0, z=5) et regarde droit vers le bas. Les axes x, y et z pointent dans la même direction que l’image du monde (comme indiqué dans l’illustration ci-dessus). Le cadre de dessin actuel se trouve par défaut sur le cadre du monde.

Un objet 3D est donc dessiné (sans fonction translate ou rotate préalable) au milieu de l’écran, à 5 mètres de la caméra.

Comment fonctionne le dessin?

Pour dessiner à l’écran, différentes commandes de dessin très puissantes sont disponibles. Il existe des commandes pour les points, les lignes, les cercles, les ellipses, les triangles, les rectangles et les quadrilatères (généraux).

Toutes les commandes ont besoin d’une coordonnée d’origine (x,y) et, la plupart du temps, d’indications supplémentaires, par ex. le rayon pour un cercle, la largeur et la hauteur pour un rectangle, etc.

La structure minimale d’un dessin nécessite trois lignes de code.

Exemple:

fond(0,0,0)
drawCircle(120,120,50)
update()

La première ligne remplit l’arrière-plan avec du noir.
La deuxième ligne dessine un cercle de 50 pixels de rayon à la position x = 120 et y = 120. La troisième ligne actualise l’affichage. Ce n’est qu’avec la commande update() que les commandes de dessin deviennent visibles!

En plus de la couleur de fond, il est également possible de définir la couleur du contour et du remplissage. Plus d’informations à ce sujet sous “Comment modifier les couleurs” ?

En outre, la surface du dessin peut être manipulée de différentes manières: Déplacement du point d’origine, rotation de l’image autour du (nouveau) point d’origine, mise à l’échelle (agrandissement/réduction).
Pour en savoir plus, voir “Système de coordonnées” et “Transformation des coordonnées”.

Espaces colorimétriques / systèmes

Les couleurs sont mélangées sur les écrans d’ordinateur à partir de trois couleurs de base d’intensité lumineuse différente: le rouge, le vert et le bleu. Les différentes valeurs sont indiquées sur une échelle de valeurs de 0 à 255. Cela signifie qu’en théorie, 255 x 255 x 255 = environ 16 millions de couleurs sont possibles. Physiquement, l’Oxocard ne peut toutefois représenter que 65’536 couleurs effectives. Dans ce cas, le noir est la combinaison r=0,g=0,b=0, et le blanc r=255,g=255,b=255.

Il existe différents systèmes de classification des couleurs. Dans le langage courant, les différentes couleurs portent par exemple des noms spécifiques, comme bleu turquoise, rose clair, rouge tomate, vert kiwi, etc. Dans le monde informatique, on utilise des espaces ou des systèmes de couleurs. Sur l’Oxocard, nous utilisons deux systèmes courants: - le système RGB et - le système HSV

Dans le système RGB, les trois parties de couleur pour le rouge, le vert et le bleu sont indiquées par un chiffre entre 0 et 255, comme décrit ci-dessus. Ce système est également très présent dans les programmes graphiques ou sur les pages web. Il existe différents outils sur Internet qui permettent de déterminer le code couleur d’une couleur souhaitée.

Les valeurs de couleur possibles pour le rouge, le vert et le bleu sont représentées dans l’image suivante:

Avec le système HSV, nous avons trois autres valeurs, Hue (H), Saturation (S) et Value (Luminosité).

Hue est la valeur de couleur. Dans le système Hue original, cette valeur est disposée sur un cercle et l’entrée correspond à une valeur comprise entre 0 et 360 degrés. Sur l’Oxocard, nous avons également limité la valeur disponible entre 0 et 255 pour des raisons d’efficacité. Les valeurs de couleur correspondantes peuvent être consultées ici:

Saturation est une valeur comprise entre 0 et 255 et indique la saturation de la couleur. 255 signifie que la couleur est très prononcée. Plus la valeur est faible, plus la couleur est grise. “0” correspond donc à une valeur de gris. La troisième valeur “Value” détermine la luminosité entre 0 (très sombre) et 255 (très clair).

Ce système permet également de générer en principe toutes les couleurs disponibles, comme dans le système RGB.

Le système HSV permet de produire très facilement de beaux transferts de couleurs, car il suffit de modifier la luminosité ou l’intensité d’une valeur Hue fixe.

Exemple:

noStroke()
for i in 24:
    fillHSV(80,255,i*10)
    drawRectangle(0,i*10,240,10)
update()

push

  push() et pop()

La fonction “push()” enregistre toutes les configurations de style et les transformations de coordonnées actuelles. Avec “pop()”, on peut ensuite revenir à l’état original (avant push()).

Exemple:

fill(255,0,0) # met la couleur de remplissage en rouge
translate(120,120) # le nouveau point zéro est à 120,120
push() # nous enregistrons l'état
fill(0,255,0) # mettre la couleur de remplissage en bleu
drawRectangle(-50,-50,100,100) # rectangle bleu
pop() # nous réinitialisons l'état (avant push())
drawCircle(0,0,30) # cercle rouge
update() # sortir

Transformation de coordonnées

En principe, le point zéro du système de coordonnées est en haut à gauche. Mais cela peut être modifié. C’est ce qu’on appelle la transformation des coordonnées. Outre la modification du point d’origine, la surface de dessin peut également être tournée et mise à l’échelle (agrandie/réduite).

Exemple:

translate(120,120)
rotate(PI/6) # 30 degrés
stroke(255,0,0)
strokeWeight(2)
drawLine(0,0,120,0)
update()

La ligne 1 transforme le point zéro au centre de l’image (figure, 2e croquis).
La ligne 2 fait maintenant tourner la surface du dessin de 30 degrés dans le sens des aiguilles d’une montre au nouveau point zéro (PI2 est la circonférence totale du cercle, PI2/12 = PI/6 correspond à 30 degrés).

Le 4e croquis de la figure montre le résultat final: la ligne rouge est dessinée à partir du centre de l’image (translate(…)) et subit une rotation de trente degrés (rotate(…)).

Comment changer les couleurs?

Comme pour le dessin normal sur papier, il faut définir dans NanoPy la couleur avec laquelle on veut travailler avant de dessiner. Les couleurs peuvent être définies pour trois fonctions de dessin:

background(r,g,b) ou backgroundHSV(h,s,v) déterminent la couleur de fond de l’écran. Lorsque cette commande est appelée, tout l’arrière-plan est rempli avec la couleur indiquée.

fill(r,g,b) ou fillHSV(h,s,v) détermine la couleur de remplissage. Si l’on dessine un rectangle, un cercle, etc., l’objet sera rempli dans la couleur que l’on indique ici. Si l’on ne souhaite PAS remplir l’objet, il faut appeler la fonction “noFill()”.

stroke(r,g,b) ou strokeHSV(h,s,v) détermine la couleur du trait. Pour toutes les fonctions de dessin, il est possible de déterminer si l’on doit seulement leur appliquer un contour ou les remplir en plus. Il est également possible d’omettre le contour en appelant la commande “noStroke()”.

Plus d’informations sur les couleurs sous “Espaces et systèmes de couleurs”.

Système de coordonnées

L’écran de l’Oxocard utilise un système de coordonnées cartésiennes avec un axe x horizontal et un axe y vertical. Contrairement aux mathématiques, l’origine des écrans est généralement en haut à gauche et non en bas à gauche.